<template>
    <div @click="back" class="backBtn">
        <i style="font-size: 20px" class="fa fa-reply" aria-hidden="true"></i><br>
        返回
    </div>
</template>

<script type="application/ecmascript">
    export default {
        name: 'backBtn',//返回按按钮
        data () {
            return {
            }
        },
        methods:{
           back(){
               this.$emit('back');//将点击事件传到父组件
           }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss' rel="stylesheet/scss" type="text/css">
    .backBtn {
        position: fixed;
        bottom: 50px;
        right: 50px;
        height: 50px;
        width: 50px;
        background-color: #2ea5f8;
        border-radius: 50%;
        z-index: 2000;
        opacity: .6;
        color: #ffffff;
        font-size: 12px;
        text-align: center;
        cursor: pointer;
        padding-top: 6px;
    }
    .backBtn:hover{
        background-color: #007dd5;
        opacity: 1;
    }
</style>
